import React, {useEffect, useRef, useState} from 'react';
import Highlight, {defaultProps} from "prism-react-renderer";
import './demo.scss'
import 'prismjs/themes/prism-coy.css'
import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
import {Button, Icon} from "react-ui-xmui";
// eslint-disable-next-line import/no-webpack-loader-syntax

const classes=(...params)=>{
  return  params.filter(Boolean).join(' ');
}

const Demo = (props) => {


  const [visible, setVisible] = useState(false)
  const visibleClass =visible && 'visible'
  const {intro,name} = props

  return (
    <div className={'example'}>
      <div className={'intro'}>{intro}</div>
      <div className={'example-demo'} >
        {props.children}
      </div>
      <div className={'controller'}>
        <Button onClick={()=>{setVisible(!visible)}}>代码</Button>
      </div>

       <div className={classes('example-code',visibleClass)}>

         {/* eslint-disable-next-line import/no-webpack-loader-syntax */}
         <Highlight  {...defaultProps} code={require(`!!raw-loader!./${name}`).default} language="jsx" theme={duotoneLight}>
          {({className, style, tokens, getLineProps, getTokenProps}) => (
            <pre className={className} style={style}>
        {tokens.map((line, i) => (
          <div {...getLineProps({line, key: i})}>
            {line.map((token, key) => (
              <span {...getTokenProps({token, key})} />
            ))}
          </div>
        ))}
      </pre>
          )}
        </Highlight>
      </div>

    </div>
  );
};

export default Demo;